<template>
	<view class="">
		<view class="header" :style="{'height':statusBarHeight+'px'}">
			<view class="navon" :style="{'height':statusBarHeight+'px','padding-top':statusBarHeight1+'px'}">
				<view class="header-back" @click="goBack()">
					<i class="iconfont" style="font-size: 20px;">&#xe605</i>
				</view>
				<view class="hearder-content">
					抢单
				</view>
			</view>
		</view>
		<view>
			<view class="orderList" :style="{'top':statusBarHeight+'px'}">
				
				
				
				<view class="orderList-title" >

					<span>30分钟内未选人，将自动匹配第一位抢单达人</span>
				</view>
				
				
				<view class="experts" v-for="(item,index) in orderList"
					style=" border-radius: 15rpx;  position: relative;">
					<view class="status">
						待抢单
					</view>

					<view class="con2">
						<view class="l1">
							<image style="width: 26px;height: 26px;border-radius:50%;margin: 0 20rpx;"
								:src="item.user_avatar" mode="aspectFill"></image>
							{{item.user_nickname}}
							<image src="https://pw.qyang.cc/static/svg/icon-realname.svg" v-if="item.user_is_real"
								style="width: 30rpx;height: 30rpx;margin-left:20rpx;">
							</image>
							<view class="l1-sex1" v-if="item.user_gender == 1" style="margin-left:20rpx;">
								<image src="https://pw.qyang.cc/static/sexW.png"
									style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
								</image>{{item.user_age}}
							</view>
							<view class="l1-sex2" v-if="item.user_gender == 0" style="margin-left:20rpx;">
								<image src="https://pw.qyang.cc/static/sexM.png"
									style="width: 20rpx;height: 20rpx; margin-right: 10rpx;">
								</image>{{item.user_age}}
							</view>
						</view>
					</view>




					<!-- 看电影 -->
					<view class="con1">
						<view class="con1-item">
							<image src="https://pw.qyang.cc/static/svg/order-icon-0.svg" mode=""></image>
							<view>{{item.title}}</view>
						</view>
						<view class="con1-item">
							<image src="https://pw.qyang.cc/static/svg/biao.svg" mode=""></image>
							<view>{{item.time_text}}</view>
						</view>
						<view class="con1-item">
							<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode=""></image>
							<view>{{item.address}}</view>
						</view>
						<view class="con1-item" v-if="item.type == 0">
							<image src="https://pw.qyang.cc/static/svg/order-icon-3.svg" mode=""></image>
							<view>{{item.level_title}}</view>

						</view>

					</view>



					<!-- 价格 -->
					<view class="con3">
						<view style="display: flex;align-items: center;">
							{{item.total_price}}元
							<span class="con3-text">
								（服务费:
								<span class="money">{{item.price}}元 </span>
								路费:
								<span class="money">{{item.address_price}}元
								</span>）
							</span>
						</view>

					</view>


					<!-- 接单 -->
					<view class="order">

						<view class="" style="display: flex;">
							<view class="orderImg" @click="toPhone(item.user_mobile)">
								<image src="https://pw.qyang.cc/static/icon-phone.png" mode=""></image>
							</view>
							<view class="orderImg" @click="toMessage(item.user_id)">
								<image src="https://pw.qyang.cc/static/svg/chat.svg" mode=""></image>
							</view>

							<view class="orderTxt" @click="qiang(item)" v-if="!item.baoming">
								抢单
							</view>
							<view class="orderTxt hui" v-else>
								已报名
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				statusBarHeight1: 0,
				titleBarHeight: 0,
				orderList: [],
				orderData: {},
				expertsList: [{
						id: 1,
						avatar: 'https://pw.qyang.cc/static/avatar2.png',
						name: '用户昵称',
						level: 'vip',
						age: '21',
						status: '0', //待接单
						work: '看电影',
						duration: '3小时',
						daytime: '7月7号',
						time: '8:00',
						location: '成都市金华万达广场澳洲牛排店自助',
						totalPrice: '900',
						serviceCharge: '800',
						fares: '100',
            city_id:0,
						page: 1,
					}

				],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					// #ifdef MP-WEIXIN
					this.statusBarHeight1 = uni.getMenuButtonBoundingClientRect().top;
					this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
					this.statusBarHeight = this.titleBarHeight + this.statusBarHeight1;
					// #endif	
					// #ifndef MP-WEIXIN
					this.statusBarHeight = res.statusBarHeight * 1 + 46;
					this.statusBarHeight1 = res.statusBarHeight;
					// #endif
				},
			});
			this.getData()
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			this.page++
			this.getList()
		},
		onPullDownRefresh() {
			this.getData()
		},
		methods: {

			getData() {
        let dw = uni.getStorageSync('dw')
        this.city_id=dw.id
        var userInfo=JSON.parse(uni.getStorageSync('userInfo'))
        console.log(userInfo,"userInfo")
				this.page = 1
				this.getList()
			},
			qiang(item) {
				var that = this
				uni.showModal({
					title: "抢单",
					content: "请确认抢单~",
					success(res) {
						if (res.confirm) {
							that.doQiang(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},
			doQiang(item) {
				var that = this
				this.rq.getData('order/robAdd', {
					order_id: item.id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					that.getData()
				})
			},
			getList() {

				var that = this;
				var page = this.page;
				if (!page) {
					page = 1
				}
				if (this.page == 1) {
					this.orderList = [];
				}
				if (page > 1 && this.orderData.last_page && page > this.orderData.last_page) {
					return;
				}

				this.rq.getData('order/getOrderList', {
					// text:this.searchContent,
					status: 2,
          city_id:this.city_id,
					// type:'user',
					page: page
				}).then(res => {

					if (res.code == 1) {

						this.orderList = this.orderList.concat(res.data.data);
						this.orderData = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			goBack() {
				uni.navigateBack()
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			toPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, // 电话号码
					success: function() {
						console.log('拨打电话成功！');
					},
					fail: function(err) {
						console.error('拨打电话失败：', err);
					}
				});
			},
			toMessage(id) {
				uni.navigateTo({
					url: "/subpages/message/chat?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderList {
		position: relative;

		background-color: #f7f7f7;
	}

	.header {
		z-index: 1;
		background-color: #fff;
		width: 100%;
		height: auto;
		display: table;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;

		.header-back {
			margin-left: 10rpx;
			height: 13px;
			line-height: 13px;
			position: absolute;
			left: 0;
			color: #000;
		}

		.hearder-content {
			font-size: 16px;
			font-weight: normal;
			line-height: 28px;
			text-align: center;
			display: flex;
			align-items: center;
			letter-spacing: 0px;
			color: #000;
		}

		.navon {
			width: 100%;
			height: auto;
			position: absolute;
			top: 0px;
			left: 0px;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	.tabs {
		background-color: #fff;
		border-radius: 14rpx 14rpx 0 0;
		position: absolute;
		top: 560rpx;
		width: 100%;
		height: 200rpx;
	}

	.choose {

		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #00BC56;
	}

	.goTxt {
		display: flex;
		align-items: flex-end;
		font-size: 28rpx;
		color: #00BC56;
	}


	.bg-remaining {
		background-color: #00BC56;
	}

	.bg-overdue {
		background-color: #FF5866;
	}

	.cancelOrderTxt {
		color: #FF7681;
		font-size: 26rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.timeLeft {
		display: flex;
		background-color: #00BC56;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 14rpx;
		margin: 20rpx 0;

		.timeLeftImg {
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.order {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 20rpx;

		.orderImg {
			width: 44rpx;
			height: 44rpx;
			margin-right: 12rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				display: block;
			}
		}

		.orderTxt {
			background: #FF5866;
			color: #fff;
			width: 150rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			border-radius: 50rpx;
			margin-left: 10rpx;
		}

		.orderTxt.hui {
			background: #999999;
		}

		.orderCancel {
			background: #F7F7F7;
			color: #000;
			width: 150rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			border-radius: 50rpx;
			margin-left: 10rpx;
		}
	}

	.status {
		color: #fff;
		background: #FF772B;
		width: 110rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 26rpx;
		border-radius: 0px 16rpx 0px 16rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.price {
		display: flex;
		align-items: flex-end;
		margin-top: 20rpx;
	}

	.totalPrice {
		color: #FF5866;
		font-size: 32rpx;
		// margin-right: 20rpx;
	}

	.service-text {
		font-size: 28rpx;
		color: #999999;
	}

	.service-amount {
		font-size: 28rpx;
		color: #333333;
	}

	.price {
		display: flex;
	}

	.expertsVip {
		width: 27rpx;
		height: 30rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}



	.work {
		background: #FFF6F9;
		border-radius: 16rpx;
		padding: 10rpx 20rpx;
	}

	.experts {
		// width: 90%;
		background-color: #fff;
		margin: 20rpx 30rpx;
		padding: 20rpx;
	}

	.expertAn {
		display: flex;
		margin-bottom: 20rpx;

		.avatarImg {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.expertsName {
			font-size: 32rpx;
			font-weight: bold;
			color: #000;
			margin-right: 20rpx;
		}

		.expertsAge {
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(253, 168, 175, 0.2);
			width: 84rpx;
			border-radius: 50rpx;

			.expertsAgeImg {
				width: 20rpx;
				height: 20rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.expertsAgeTxt {
				font-size: 22rpx;
				color: #FF7681;
				margin-left: 5rpx;
			}
		}
	}

	.expertDetail {
		display: flex;
		margin: 30rpx 0;
		// align-items: center;

		.contentImg {
			width: 27rpx;
			height: 27rpx;
			margin-right: 20rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;

			}
		}

		.contentTxt {
			display: flex;
			font-size: 26rpx;
			line-height: 27rpx;
			height: 27rpx;

			view {
				margin-right: 20rpx;
			}
		}


	}


	.con1 {
		// width: 315px;
		// height: 42.62%;
		border-radius: 8px;
		opacity: 1;

		background: #FFF6F9;
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 13px;
		font-weight: normal;
		line-height: 12px;
		letter-spacing: 0px;

		color: #333333;
		padding: 20rpx;
		margin: 0 30rpx;
		margin: 0 auto;
		box-sizing: border-box;
		width: 630rpx;

		image {
			width: 12px;
			height: 12px;
			margin-right: 20rpx;
		}

		.con1-item {
			height: 40rpx;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			&:last-child {
				margin-bottom: 0;
			}

			view {
				// width: 580rpx;
				flex: 1;
				font-size: 26rpx;
				line-height: 26rpx;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏超出容器的文本 */
				text-overflow: ellipsis;
				/* 显示省略号 */
			}

			;
		}
	}

	.con2 {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.l1 {
			width: 100%;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 16px;
			font-weight: 500;
			line-height: 17px;
			letter-spacing: 0px;

			color: #000000;
			display: flex;
			align-items: center;
			position: relative;

			.l1-sex1 {
				display: flex;
				width: 42px;
				height: 16px;
				border-radius: 88px;
				opacity: 1;
				background: rgba(116, 220, 254, 0.2);

				font-size: 11px;
				font-weight: 500;
				line-height: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 0px;
				color: #2BC1F1;

			}

			.l1-sex2 {
				display: flex;
				width: 42px;
				height: 16px;
				border-radius: 88px;
				opacity: 1;

				background: rgba(253, 168, 175, 0.2);

				font-size: 11px;
				font-weight: 500;
				line-height: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 0px;
				color: #FDA8AF;

			}
		}
	}

	.con3 {
		padding: 20rpx auto;

		/* 900元 */
		font-family: 阿里巴巴普惠体 2.0;
		font-weight: 500;
		font-size: 14px;

		color: #FF5866;
		margin: 24rpx 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// width: 315px;

		.con3-tab {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 14px;
			font-weight: normal;
			line-height: 12px;
			text-align: center;
			letter-spacing: 0px;
			color: #00BC56;
			display: flex;
			align-items: center;

			.dian {
				width: 16rpx;
				height: 16rpx;
				opacity: 1;
				background: #00BC56;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.con3-text {
			font-size: 12px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			margin: 0 10rpx;
			color: #999999;

			.money {
				color: #333333;
				margin: 0 10rpx;
			}

		}
	}

	.status {
		color: #fff;
		background: #FF772B;
		width: 110rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 26rpx;
		border-radius: 0px 16rpx 0px 16rpx;
		text-align: center;
		line-height: 50rpx;

		&.status0 {
			background: #FF7681;
		}

		&.status1 {
			background: #FFB72B;
		}

		&.status2 {
			background: #84E28C;
		}

		&.status3 {
			background: #84E28C;
		}

		&.status4 {
			background: #75D4F9;
		}

		&.status5 {
			background: #AE9CFE;
		}

		&.status6 {
			background: #D1D1D6;
		}
	}
	
	
	.orderList-title{
		background: #FEF4F5;
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 26rpx;
		font-weight: normal;
		text-align: left;
		letter-spacing: 0px;
		color: #FF7681;
		
		span{
			margin-left: 36rpx;
		}
	}
</style>